<template>
  <div class="p-3">
    <el-row :gutter="12">
      <el-col :xs="24" :span="17" class="mb-3">
        <div class="left">
          <div class="tp">
            <div class="title">
              <div class="l">
                <div class="dian"></div>
                <div class="text">待办事项</div>
              </div>
              <el-button class="rBtn">
                <el-icon class="mr-0.5 mb-0.4" size="12px">
                  <component is="Plus" />
                </el-icon>
                待办调整
              </el-button>
            </div>
            <el-row class="mt-4" justify="space-between">
              <el-col :xs="12" :sm="8" :lg="4" class="mb-3">
                <div class="card">
                  <div class="t">待付款</div>
                  <div class="c">{{ todo.waitPay }}</div>
                  <div class="x">去提醒</div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :lg="4" class="mb-3">
                <div class="card">
                  <div class="t">待发货</div>
                  <div class="c">{{ todo.waitDeliver }}</div>
                  <div class="x">去发货</div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :lg="4" class="mb-3">
                <div class="card">
                  <div class="t">待售后</div>
                  <div class="c">{{ todo.waitAfterSale }}</div>
                  <div class="x">去发货</div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :lg="4" class="mb-3">
                <div class="card">
                  <div class="t">投诉</div>
                  <div class="c">{{ todo.complaint }}</div>
                  <div class="x">去处理</div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :lg="4" class="mb-3">
                <div class="card">
                  <div class="t">库存预警</div>
                  <div class="c">{{ todo.stockWarning }}</div>
                  <div class="x">去处理</div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :lg="4" class="mb-3">
                <div class="card">
                  <div class="t">营销待办</div>
                  <div class="c">{{ todo.marketing }}</div>
                  <div class="x">去处理</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="bt m-t-3 p-4">
            <div class="tit">待办提醒</div>
            <el-scrollbar ref="scrollbarRef" class="list mt-3" @wheel.prevent="handleScroll">
              <div class="item p-3 blue">
                <div class="state">待发货</div>
                <div class="titp">
                  您有一笔
                  <span class="tt">待发货</span>
                  订单即将超时
                </div>
                <div class="msgBt">
                  <div class="id">订单号：416514635879874264</div>
                  <div class="time">剩余 2小时58分56秒</div>
                </div>
              </div>
              <div class="item p-3 red">
                <div class="state">待发货</div>
                <div class="titp">
                  您有一笔
                  <span class="tt">待发货</span>
                  订单即将超时
                </div>
                <div class="msgBt">
                  <div class="id">订单号：416514635879874264</div>
                  <div class="time">剩余 2小时58分56秒</div>
                </div>
              </div>
              <div class="item p-3 red">
                <div class="state">待发货</div>
                <div class="titp">
                  您有一笔
                  <span class="tt">待发货</span>
                  订单即将超时
                </div>
                <div class="msgBt">
                  <div class="id">订单号：416514635879874264</div>
                  <div class="time">剩余 2小时58分56秒</div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :span="7" class="mb-3">
        <div class="user p-4">
          <div class="user-top">
            <div class="u-t-l">HI,{{ userStore.shop.name }}</div>
            <el-button class="u-t-r" link @click="GoShopInfo">
              <svg-icon icon-class="shop" size="14px" class="mr-1" />
              店铺信息
            </el-button>
          </div>
          <div class="user-count mt-5">
            <img class="avato" :src="userStore.shop.logo" />
            <div class="u-c-r">
              <div class="item">
                <div class="l">店铺名称：</div>
                <div class="r">{{ userStore.shop.name }}</div>
              </div>
              <div class="item">
                <div class="l">店铺状态：</div>
                <div class="r">营业中</div>
              </div>
            </div>
          </div>
          <div class="user-bzj mt-6">
            <div class="u-b-l mr-3 flex">
              店铺保证金
              <div class="ml-1 pt-1">
                <svg-icon icon-class="king" size="25px" />
              </div>
            </div>
            <div class="u-b-r">已缴纳</div>
          </div>
          <div class="user-amout mt-4">10000.00</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :xs="24" :span="17">
        <div class="operating-data p-4">
          <div class="data-top">
            <div class="d-t-l">经营数据</div>
            <el-button class="d-t-r" link>
              更多数据
              <el-icon class="mb-0.2">
                <component is="ArrowRightBold" />
              </el-icon>
            </el-button>
          </div>
          <el-row :gutter="8" class="mt-2">
            <el-col :xs="24" :sm="12" :lg="8">
              <div class="data-Item p-3 mb-2">
                <div class="it-top">
                  <svg-icon icon-class="amount" size="40px" />
                  <div class="rt ml-2">
                    <div class="t">成交金额</div>
                    <div class="x">Transaction amount</div>
                  </div>
                </div>
                <div class="it-mony mt-6">
                  <div class="k">￥</div>
                  <div class="num">{{ managementData?.transactionAmount?.monthSales }}</div>
                  <div class="qus">
                    <el-icon>
                      <component is="CaretTop" />
                    </el-icon>
                    8.5%
                  </div>
                </div>
                <div class="btit">月销售额</div>
                <div class="it-mony mt-6">
                  <div class="k">￥</div>
                  <div class="total">{{ managementData?.transactionAmount?.totalSales }}</div>
                </div>
                <div class="btit">总销售额</div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="8">
              <div class="data-Item p-3 mb-2">
                <div class="it-top">
                  <svg-icon icon-class="filorder" size="40px" />
                  <div class="rt ml-2">
                    <div class="t">成交订单量</div>
                    <div class="x">The volume of filled orders</div>
                  </div>
                </div>
                <div class="it-mony mt-6">
                  <div class="k">单</div>
                  <div class="num">{{ managementData?.orderCompleteVolume?.monthCompleteVolume }}</div>
                  <div class="qus green">
                    <el-icon>
                      <component is="CaretBottom" />
                    </el-icon>
                    8.5%
                  </div>
                </div>
                <div class="btit">月成交量</div>
                <div class="it-mony mt-6">
                  <div class="k">单</div>
                  <div class="total">{{ managementData?.orderCompleteVolume?.totalCompleteVolume }}</div>
                </div>
                <div class="btit">总成交量</div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="8">
              <div class="data-Item p-3 mb-2">
                <div class="it-top">
                  <svg-icon icon-class="number" size="40px" />
                  <div class="rt ml-2">
                    <div class="t">成交人数</div>
                    <div class="x">Number of transactions</div>
                  </div>
                </div>
                <div class="it-mony mt-6">
                  <div class="k">人</div>
                  <div class="num">{{ managementData?.transactionPeopleNumber?.monthPeopleNumber }}</div>
                  <div class="qus green">
                    <el-icon>
                      <component is="CaretBottom" />
                    </el-icon>
                    8.5%
                  </div>
                </div>
                <div class="btit">月成交人数</div>
                <div class="it-mony mt-6">
                  <div class="k">人</div>
                  <div class="total">{{ managementData?.transactionPeopleNumber?.totalPeopleNumber }}</div>
                </div>
                <div class="btit">总成交人数</div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="8">
              <div class="data-Item p-3 mb-2">
                <div class="it-top">
                  <svg-icon icon-class="refund" size="40px" />
                  <div class="rt ml-2">
                    <div class="t">退款金额</div>
                    <div class="x">Refund amount</div>
                  </div>
                </div>
                <div class="it-mony mt-6">
                  <div class="k">￥</div>
                  <div class="num">{{ managementData?.refundAmount?.monthRefundAmount }}</div>
                  <div class="qus green">
                    <el-icon>
                      <component is="CaretBottom" />
                    </el-icon>
                    8.5%
                  </div>
                </div>
                <div class="btit">月退款金额</div>
                <div class="it-mony mt-6">
                  <div class="k">￥</div>
                  <div class="total">{{ managementData?.refundAmount?.totalRefundAmount }}</div>
                </div>
                <div class="btit">总退款金额</div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="8">
              <div class="data-Item p-3 mb-2">
                <div class="it-top">
                  <svg-icon icon-class="uolume" size="40px" />
                  <div class="rt ml-2">
                    <div class="t">退款订单量</div>
                    <div class="x">The volume of filled orders</div>
                  </div>
                </div>
                <div class="it-mony mt-6">
                  <div class="k">单</div>
                  <div class="num">{{ managementData?.orderRefundVolume?.monthRefundVolume }}</div>
                  <div class="qus green">
                    <el-icon>
                      <component is="CaretBottom" />
                    </el-icon>
                    8.5%
                  </div>
                </div>
                <div class="btit">月退款量</div>
                <div class="it-mony mt-6">
                  <div class="k">单</div>
                  <div class="total">{{ managementData?.orderRefundVolume?.totalRefundVolume }}</div>
                </div>
                <div class="btit">总退款量</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :span="7">
        <div class="mark p-4">
          <div class="top">
            <div class="lt">店铺评分</div>
            <el-button class="rt" link>
              查看详情
              <el-icon class="mb-0.2">
                <component is="ArrowRightBold" />
              </el-icon>
            </el-button>
          </div>
          <div class="box mt-2">
            <div class="tp">
              {{ shopCount.score }}
              <el-rate class="ml-1" v-model="value" disabled :colors="['#dbdbdb', '#dbdbdb', '#5e80fa']"
                disabled-void-color="#dbdbdb" />
            </div>
            <div class="lineBox mt-8">
              <div class="item mb-3">
                <div class="l">
                  5
                  <svg-icon icon-class="Star" size="18px" />
                </div>
                <div class="r ml-4">
                  <el-progress style="width: 140px" :stroke-width="10"
                    :percentage="shopCount.fiveStarRatio / shopCount.commentNum * 100" color="#6283fb"
                    :show-text="false" />
                </div>
              </div>
              <div class="item mb-3">
                <div class="l">
                  4
                  <svg-icon icon-class="Star" size="18px" />
                </div>
                <div class="r ml-4">
                  <el-progress style="width: 140px" :stroke-width="10"
                    :percentage="shopCount.fourStarRatio / shopCount.commentNum * 100" color="#6283fb"
                    :show-text="false" />
                </div>
              </div>
              <div class="item mb-3">
                <div class="l">
                  3
                  <svg-icon icon-class="Star" size="18px" />
                </div>
                <div class="r ml-4">
                  <el-progress style="width: 140px" :stroke-width="10"
                    :percentage="shopCount.threeStarRatio / shopCount.commentNum * 100" color="#6283fb"
                    :show-text="false" />
                </div>
              </div>
              <div class="item mb-3">
                <div class="l">
                  2
                  <svg-icon icon-class="Star" size="18px" />
                </div>
                <div class="r ml-4">
                  <el-progress style="width: 140px" :stroke-width="10"
                    :percentage="shopCount.twoStarRatio / shopCount.commentNum * 100" color="#6283fb"
                    :show-text="false" />
                </div>
              </div>
              <div class="item mb-3">
                <div class="l">
                  1
                  <svg-icon icon-class="Star" size="18px" />
                </div>
                <div class="r ml-4">
                  <el-progress style="width: 140px" :stroke-width="10"
                    :percentage="shopCount.oneStarRatio / shopCount.commentNum * 100" color="#6283fb"
                    :show-text="false" />
                </div>
              </div>
            </div>
            <div class="count">共计{{ shopCount.commentNum }}条评论</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { useUserStore } from "@/store";
import ShopAPI, { type CountInfo, TodoInfo, ManagementInfo } from "@/api/shop";
onMounted(async () => {
  shopCount.value = await ShopAPI.getCount()
  todo.value = await ShopAPI.getTodoCount()
  managementData.value = await ShopAPI.getManagementData()
  console.log(managementData.value);
})
const shopCount = ref<CountInfo>({})
const managementData = ref<ManagementInfo>()
const todo = ref<TodoInfo>({})
const router = useRouter();
const userStore = useUserStore()
const scrollbarRef = ref();
function handleScroll(e: any) {
  const wheelDelta = e.wheelDelta || -e.deltaY * 40;
  scrollbarRef.value.setScrollLeft(
    scrollbarRef.value.wrapRef.scrollLeft - wheelDelta
  );
}
const value = ref(4.6);
const GoShopInfo = () => {
  router.push("/shopInfo");
};
</script>

<style lang="scss" scoped>
.mark {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .lt {
      font-weight: 700;
      font-size: 24px;
    }

    .rt {
      width: 102px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 35px;
      background-color: #f1f5fa;
      font-size: 14px;
      color: #333;
    }
  }

  .box {
    padding: 15px 30px 30px 30px;
    background-image: linear-gradient(to bottom, #f6fcff, #fafbfd);
    border-radius: 6px;

    .tp {
      font-size: 48px;
      font-weight: 700;
      display: flex;
      align-items: center;
      color: #4671f6;
      font-family: D-DIN;

      :deep .el-rate__icon {
        font-size: 44px;
        font-weight: normal;
      }
    }

    .lineBox {
      .item {
        display: flex;
        align-items: center;

        .l {
          font-size: 18px;
        }
      }
    }

    .count {
      color: #6c6c6c;
      font-size: 14px;
    }
  }
}

.operating-data {
  background-color: #fff;
  border-radius: 8px;

  .data-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .d-t-l {
      font-size: 22px;
    }

    .d-t-r {
      width: 102px;
      height: 32px;
      border-radius: 35px;
      background-color: #f2f6fb;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333333;
    }
  }

  .data-Item {
    width: 100%;
    height: 244px;
    border-radius: 8px;
    border: 2px solid #daedff;

    .it-top {
      display: flex;

      .img {
        width: 40px;
        height: 40px;
      }

      .rt {
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .t {
          font-size: 18px;
        }

        .x {
          font-size: 10px;
          color: #6c6c6c;
        }
      }
    }

    .it-mony {
      display: flex;
      align-items: flex-end;

      .k {
        font-size: 16px;
        font-weight: 700;
      }

      .num {
        font-size: 40px;
        font-weight: 700;
        line-height: 40px;
        margin: 0 5px;
      }

      .total {
        font-size: 26px;
        font-weight: 700;
        line-height: 26px;
        margin: 0 5px;
      }

      .qus {
        font-size: 12px;
        font-weight: 500;
        color: #ff4c4c;
        display: flex;
        align-items: center;
      }

      .green {
        color: #12b475;
      }
    }

    .btit {
      font-size: 12px;
      color: #6c6c6c;
    }
  }
}

.left {
  .tp {
    width: 100%;
    background-color: #7d95fc;
    border-radius: 8px;
    padding: 20px;
    padding-bottom: 0;

    .title {
      display: flex;

      justify-content: space-between;
      align-items: center;
      padding-right: 30px;

      .l {
        display: flex;
        align-items: center;

        .dian {
          width: 8px;
          height: 8px;
          background-color: #fff;
          margin-right: 15px;
        }

        .text {
          font-size: 22px;
          color: #fff;
        }
      }

      .rBtn {
        width: 86px;
        height: 28px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #1f75ec;
        font-size: 12px;
        background-color: #daedff;
      }
    }

    .card {
      display: flex;
      flex-direction: column;
      color: #ffffff;
      align-items: center;

      .t {
        padding-left: 5px;
        font-size: 14px;
      }

      .c {
        font-size: 40px;
        font-weight: 700;
      }

      .x {
        padding-left: 5px;
        font-size: 12px;
      }
    }
  }

  .bt {
    width: 100%;
    border-radius: 8px;
    background-color: #fff;

    .tit {
      font-size: 22px;
    }

    .list {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;

      .item {
        width: 380px;
        height: 72px;
        margin-right: 20px;
        border-radius: 8px;
        border: 2px solid #daedff;
        position: relative;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;

        .state {
          position: absolute;
          top: 0;
          right: 0;
          width: 60px;
          height: 20px;
          border-radius: 0 8px 0 8px;
          font-size: 14px;

          display: flex;
          justify-content: center;
          align-items: center;
        }

        .titp {
          font-size: 14px;
        }

        .msgBt {
          display: flex;
          justify-content: space-between;

          .id {
            font-size: 12px;
            color: #6c6c6c;
          }

          .time {
            font-size: 12px;
            color: #6c6c6c;
          }
        }
      }

      .item:last-child {
        margin-right: 0;
      }

      .blue {
        border-color: #daedff;

        .state {
          background-color: #8fbaf5;
          color: #1f75ec;
        }

        .titp {
          .tt {
            color: #1f75ec;
          }
        }
      }

      .red {
        border-color: #ffc0c066;

        .state {
          background-color: #ffb7b7;
          color: #ff4c4c;
        }

        .titp {
          .tt {
            color: #ff4c4c;
          }
        }
      }
    }

    // .list::-webkit-scrollbar-thumb:hover {
    //   background-color: red;
    // }

    // .list::-webkit-scrollbar {
    //   height: 4px;
    // }
  }
}

.user {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;

  .user-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;

    .u-t-l {
      font-family: Alimama ShuHeiTi;
      font-size: 24px;
      font-weight: 700;
    }

    .u-t-r {
      width: 102px;
      height: 32px;
      border-radius: 35px;
      background-color: #f1f5fa;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333;
    }
  }

  .user-count {
    display: flex;

    .avato {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      border: 2px solid #1f75ec;
      margin-right: 20px;
    }

    .u-c-r {
      height: 72px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .item {
        display: flex;
        align-items: center;
        font-size: 16px;

        .l {
          margin-right: 14px;
          color: #3a3a3a;
        }

        .r {
          color: #383838;
        }
      }
    }
  }

  .user-bzj {
    display: flex;
    align-items: center;

    .u-b-l {
      font-size: 16px;
      align-items: center;
    }

    .u-b-r {
      width: 74px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 35px;
      font-size: 14px;
      background-color: #f2f6fb;
    }
  }

  .user-amout {
    font-size: 40px;
    color: #333;
    font-weight: 700;
  }
}
</style>
